<template>
    <div>
        <!--搜索-->
        <el-row :gutter="20">
            <el-col :span="6">
                <el-select v-model="searchForm.statusCode" clearable placeholder="请选择订单状态" style="width:100%">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="18">
                <el-button type="success" size="big" icon="el-icon-search" @click="search">搜索
                </el-button>
                <el-button type="primary" size="big" icon="el-icon-refresh" @click="refresh">刷新
                </el-button>
            </el-col>
            <el-col :span="2"></el-col>
        </el-row>
        <el-row>
            <el-col :span="24"> &nbsp;</el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%" height="450">
            <!-- 序号 -->
            <el-table-column type="index" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="orderNo" label="订单编号" width="180">
            </el-table-column>

            <el-table-column prop="storeName" label="门店名称" width="120">
            </el-table-column>
            <el-table-column prop="productName" label="商品" width="180">
            </el-table-column>

            <el-table-column prop="product.picture" label="商品图片" width="120">
                <template slot-scope="scope">
                    <el-image style="width: 60px; height: 40px" :src="scope.row.product.picture">

                    </el-image>
                </template>
            </el-table-column>
            <el-table-column label="单价" width="120" prop="product.newPrice">
                <!--                <template slot-scope="scope">-->
                <!--                    <span>{{ getJudgment(scope.row) }}</span>-->
                <!--                </template>-->
            </el-table-column>
            <el-table-column prop="product.freight" label="运费(元)" width="100">
            </el-table-column>
            <el-table-column prop="productCount" label="商品数量" width="120"> </el-table-column>
            <el-table-column prop="totalAmount" label="总金额" width="120">
                <!-- <template slot-scope="scope">
                    <span>{{ getJudgment(scope.row) }}</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="userAddress.addressName" label="下单人" width="120">
            </el-table-column>

            <el-table-column prop="userAddress.addressName" label="收货人" width="150">
            </el-table-column>
            <el-table-column prop="userAddress.phone" label="联系方式" width="150">
            </el-table-column>
            <el-table-column label="收货地址" width="300" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{ scope.row.userAddress.province }} {{ scope.row.userAddress.city }}
                        {{ scope.row.userAddress.district }} {{ scope.row.userAddress.detail }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="statusCode" label="订单状态" width="120" :formatter="getStatusCode">
            </el-table-column>

            <el-table-column prop="createTime" label="下单时间" width="160">
            </el-table-column>

            <el-table-column prop="updateTime" label="更新时间" width="160">
            </el-table-column>

            <el-table-column prop="payTime" label="支付时间" width="160">
            </el-table-column>

            <el-table-column prop="deliverTime" label="发货时间" width="160">
            </el-table-column>

            <el-table-column prop="finishTime" label="完成时间" width="160">
            </el-table-column>

            <el-table-column prop="message" label="订单备注" width="150" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="payType" label="支付方式" width="120" fixed="right" :formatter="ispayType">
            </el-table-column>
            <el-table-column label="操作" width="150" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" v-if="scope.row.statusCode == 41"
                        @click="updateStatus46(scope.row.id)">发货</el-button>
                    <el-button size="mini" type="success" v-if="scope.row.statusCode == 46" disabled>已发货</el-button>
                    <el-button size="mini" type="info" v-if="scope.row.statusCode != 46 && scope.row.statusCode != 41"
                        disabled="">暂无操作</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页功能-->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchForm.currentPage" :page-sizes="[1, 2, 5, 10]" :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name: "OrderManagement",
    data() {
        return {
            tableData: [],
            searchForm: {
                //分页
                currentPage: 1,
                pageSize: 5,
                statusCode: null

            },
            total: 0,
            options: [
                { label: "待付款", value: 11 },
                { label: "待发货", value: 41 },
                { label: "待收货", value: 46 },
                { label: "已完成", value: 43 }, //已经完成的
                { label: "已评价", value: 28 }, //收到货后评价的订单
                { label: "已取消", value: 30 }, //订单超时的订单
            ],
        }
    },
    methods: {
        //分页查询所有用户信息
        loadData() {
            this.$http.post("/order/OrderManagement", this.searchForm).then((response => {

                if (response.data.code === 200) {

                    if (this.searchForm.statusCode != null || this.searchForm.statusCode != "") {
                        this.searchForm.currentPage = 1
                    }

                    this.tableData = response.data.data.records;
                    this.total = response.data.data.total;
                } else {
                    this.$message.error("查询发生错误");
                }
            }))
        },
        //显示索引
        indexMethod(index) {
            return index + 1;
        },
        getStatusCode(row) {
            switch (row.statusCode) {
                case 11:
                    return "待付款";
                case 41:
                    return "待发货";
                case 46:
                    return "待收货";
                case 43:
                    return "已完成";
                case 28:
                    return "已评价";
                case 30:
                    return "已取消";
                default:
                    return "未知状态";
            }
        },
        getJudgment(row) {
            // 在执行除法之前将字符串值转换为数字
            const totalAmount = parseFloat(row.freight);
            const productCount = parseFloat(row.productCount);
            const totalIntegral = parseFloat(row.newPrice);

            if (row.payType == 0) {
                // 检查转换是否成功并且值是否为有效数字
                if (!isNaN(totalAmount) && !isNaN(productCount) && productCount !== 0) {
                    return `￥${totalAmount * productCount + totalAmount}`;
                } else {
                    return "总金额或产品数量或积分无效";
                }
            } else if (row.payType == 1) {
                // 检查转换是否成功并且值是否为有效数字
                if (!isNaN(totalIntegral) && !isNaN(productCount) && totalIntegral !== 0) {
                    return `￥${totalAmount * productCount + totalAmount}`;
                } else {
                    return "总金额或产品数量或积分无效";
                }
            }
            else {
                // 处理当 row.payType 不为 0 时的情况
                return `￥${(totalIntegral + totalAmount) / productCount}`;
            }
        },
        //点击发货修改订单状态
        updateStatus46(id) {
            this.$http.post("/order/updateDeliveryStatus?id=" + id).then((response => {
                if (response.data.code === 200) {
                    this.$message.success(response.data.msg);
                    this.loadData();
                } else {
                    this.$message.error(response.data.msg);
                }
            }))
        },
        //支付方式
        ispayType(row) {
            if (row.payType == 0) {
                return "微信支付";
            } else if (row.payType == 1) {
                return "积分支付";
            } else {
                return "积分+微信支付";
            }
        },

        search() {
            this.loadData();
        },
        //刷新方法
        refresh() {
            this.searchForm.statusCode = null
            this.loadData();
            // location.reload();

        },
        //每页数量发生变化
        handleSizeChange(val) {
            this.searchForm.pageSize = val;
            this.loadData();
        },

        //页码发生变化（第几页）
        handleCurrentChange(val) {
            this.searchForm.currentPage = val;
            this.loadData();
        },
    },
    created() {
        this.loadData();
    }
}
</script>

<style scoped></style>
